import React from 'react'
// 组件props的校验

// vue props  1. type 类型  2. required 是否必填 3. default  4.validator

// react props校验如何来写  
// 1. 使用额外的校验包 - prop-types
// 2. 如何使用？
// 组件对象.propTypes = { prop属性: prop-types提供的类型声明 }


// 注意
// 1. react框架本身不提供校验 需要额外的校验包
// 2. 之所以需要校验 是因为 在组件参数不对的时候 给到用户一个良好的提示 快速定位错误发生在哪里
// 3. 如果需要必填校验 只需要在类型的后面 继续点isRequired [先进行必填校验 再进行类型校验]

// 组件props的默认值
// 概念: 如果传了数据就以传入的为主 如果不传就以默认值为主
// 1. 函数组件默认值  解构参数的位置直接进行赋值操作 默认值设置即可
// 2. 类组件的默认值  通过静态属性 defaultProps指定

import PropTypes from 'prop-types'
const List = ({ list, pageSize = 20 }) => {
  return (
    <>
      <ul>
        {list.map(item => <li key={item}>{item}</li>)}
      </ul>
      {pageSize}
    </>
  )
}

List.propTypes = {
  list: PropTypes.array.isRequired // 先校验是否必填 再校验类型是否正确
}

class CList extends React.Component {
  // 默认值设置
  static defaultProps = {
    pageSize: 10
  }
  render () {
    return <div>this is CList {this.props.pageSize}</div>
  }
}

class App extends React.Component {
  render () {
    return (
      <div>
        <List list={['vue']} />
        <CList pageSize={100} />
      </div>
    )
  }
}

export default App